
import React, { useState, useRef } from 'react';
import { deptList, deptParent, deptAdd, deptUpdate, deptDelete } from  '@/services/ant-design-pro/dept';

import ListView from '@/components/Base/ListView'
import Helper from '@/components/Base/helper'

const SysDetp: React.FC = () => {
  const columns = [
    Helper.Table('id', 'id').val,
    Helper.Table('父亲id', 'parentId').val,
    Helper.Table('部门名称', 'deptName').val,
  ];

  const formColumns = [
    Helper
      .Form('父级id', 'parentId')
      .TreeSelect(deptParent)
      .Params({ page: 1 })
      .FieldNames({
        label: 'deptName', value: 'id'
      })
      .Width('sm')
      .val,
    Helper.Form('部门名称', 'deptName')
      .FIP({
        rules: Helper.Rule().Require('不得为空').val,
      }).Width('md').val,
  ]

  const values = {
    headerTitle: '部门列表',
    ACTIONS: [
      {
        type: 'NEW',
        inline: true,
        submit: (id:any, body: any) => id ? deptUpdate(id, body) :  deptAdd(body)
      },
      {type: 'EDIT'},
      {type: 'DELETE', submit:(record: {id: number}) => deptDelete(record.id)}
    ],
    columns,
    request: deptList,
    formColumns,
    initialValues: {
      parentId: [1],
      deptName: '天神下凡'
    }
  }

  return (
    <ListView {...values} />
  );
};

export default SysDetp;

